const path = require('path')
//启用热更新
const webpack = require('webpack')
//导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
	entry:'./src/main.js',
	devServer: {
      	open:true,   //自动打开浏览器
      	port:3000,   //端口
      	contentBase:'./dist', //指定托管根目录
      	hot:true   //热更新
    },
    plugins:[ //配置插件的节点
    	new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
      	template:path.join(__dirname,'./src/index.html')
      }),
      new VueLoaderPlugin()
    ],
	mode:'development',
	output:{
		filename:'bundle.js',
		path: path.resolve(__dirname, './dist'),
    publicPath:'/'
	},
	module: {
    	rules: [
      		{
        		test: /\.less$/,
        		use: [{
                		loader: "style-loader" // creates style nodes from JS strings
            		}, {
                		loader: "css-loader",options: {
                    		sourceMap: true
                		}
            		}, {
                		loader: "less-loader",options: {
                    		sourceMap: true
                		}
            		}
            	]
      		},
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          // {
          //   test: /\.(png|jpg|gif)$/,
          //   use: [
          //     {
          //       loader: 'file-loader',
          //       options: {
          //         publicPath: ''
          //       }
          //     }
          //   ]
          // },
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192
                }
              }
            ]
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          { 
            test: /\.(ttf|eot|svg|woff|woff2)$/, 
            use: 'url-loader' 
          },
    	]
  	}
}